<template>
  <div
    class="standard-item"
    @click="handleClick"
    :class="{ 'standard-item--select': model == value, 'standard-item--disabled': props.disabled }"
  >
    <div class="triangle-wrap">
      <div class="triangle"> </div>
      <CIcon class="check-icon" type="c-xian-gou"></CIcon>
    </div>
    <div class="g-flex-start-center">
      <CIcon class="standard-icon" type="c-xian-hesuanbiaozhun"></CIcon>
      <div class="standard-label g-font-14n2 g-ml4">{{ label }}</div>
    </div>
    <p class="standard-des" v-ellTooltip:2>{{ desc }}</p>
  </div>
</template>
<script lang="ts" setup>
import { inject, computed, withDefaults, defineProps, defineEmits, unref } from 'vue';
import { IStandardRadioGroupInstance } from './standard-radio';
interface IProps {
  modelValue?: string;
  label: string;
  desc: string;
  value: string;
  disabled?: boolean;
}
const props = withDefaults(defineProps<IProps>(), {
  label: '标准',
  desc: '参考文件：乘用车生命周期碳排放核算技术规范',
  value: '',
  disabled: false
});

const emit = defineEmits(['update:modelValue', 'change']);
const standardRadioGroup = inject<IStandardRadioGroupInstance>('CStandardRadioGroup', {});

const isGroup = computed(
  () => standardRadioGroup && standardRadioGroup?.name === 'CStandardRadioGroup'
);
const model = computed<string>({
  get() {
    return isGroup.value ? standardRadioGroup?.modelVal?.value : props.modelValue;
  },
  set(val) {
    if (isGroup.value) {
      standardRadioGroup?.changeEvent && standardRadioGroup.changeEvent(val);
    } else {
      emit('change', val);
    }
  }
});
const handleClick = () => {
  if (props.disabled) return;
  model.value = unref(props).value;
};
</script>
<style lang="scss" scoped>
@use '../styles/index.scss' as *;
</style>
